
<script type="text/html" data-template-name="redis out">
    <div class="form-row node-input-hostname">
        <label for="node-input-hostname"><i class="fa fa-bookmark"></i> <span data-i18n="redisout.label.host"></span></label>
        <input class="input-append-left" type="text" id="node-input-hostname" placeholder="127.0.0.1" style="width: 40%;" ><button id="node-input-hostname-lookup" class="btn input-append-right"><span class="caret"></span></button>
        <label for="node-input-port" style="margin-left: 10px; width: 37px; "> <span data-i18n="redisout.label.port"></span></label>
        <input type="text" id="node-input-port" placeholder="6379" style="width:45px">
    </div>
    <div class="form-row">
        <label for="node-input-key"><i class="fa fa-key"></i> <span data-i18n="redisout.label.key"></span></label>
        <input type="text" id="node-input-key">
    </div>
    <div class="form-row">
        <label for="node-input-type"><i class="fa fa-th"></i> <span data-i18n="redisout.label.type"></span></label>
        <select type="text" id="node-input-structtype" style="width: 150px;">
        <option value="string" data-i18n="redisout.type.string"></option>
        <option value="hash" data-i18n="redisout.type.hash"></option>
        <option value="set" data-i18n="redisout.type.set"></option>
        <option value="list" data-i18n="redisout.type.list"></option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>
    <div class="form-tips"><span data-i18n="[html]redisout.tip"></span></div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('redis out',{
        category: 'storage-output',
        color:"#ffaaaa",
        defaults: {
            hostname: { value:"127.0.0.1",required:true},
            port: { value: 6379,required:true},
            name: {value:""},
            key: {value:""},
            structtype: {value:"",required:true}
        },
        inputs:1,
        outputs:0,
        icon: "redis.png",
        align: "right",
        label: function() {
            return this.name||this.key+" ("+this.structtype+")";
        },
        oneditprepare: function() {
            var availableServers = [];
            var matchedServers = {};
            RED.nodes.eachNode(function(node) {
                if (node.type == "redis out" && node.hostname && node.port && !matchedServers[node.hostname+":"+node.port]) {
                    var label = node.hostname+":"+node.port;
                    matchedServers[label] = true;
                    availableServers.push({
                        label:label,
                        value:node.hostname,
                        port:node.port
                    });
                }
            });
            $( "#node-input-hostname" ).autocomplete({
                minLength: 0,
                source: availableServers,
                select: function( event, ui ) {
                    $("#node-input-port").val(ui.item.port);
                }
            });
            var tt = this;
            tt._acOpen = false;
            $( "#node-input-hostname" ).on( "autocompleteclose", function( event, ui ) { tt._acOpen = false;} );
            $( "#node-input-hostname-lookup" ).click(function(e) {
                if (tt._acOpen) {
                    $( "#node-input-hostname" ).autocomplete( "close");
                } else {
                    $( "#node-input-hostname" ).autocomplete( "search", "" );
                }
                tt._acOpen = !tt._acOpen;
                e.preventDefault();
            });
        }
    });
</script>
